<template>
  <a-select
    :options="config.options"
    v-bind="$attrs"
    :mode="mode"
    :value="fakeValue"
    :filter-option="filterOption"
    option-filter-prop="children"
    @change="onChange"
  >
    <slot />
  </a-select>
</template>
<script>
import { findLabels } from '@/utils/label.js'

function getValue(obj, key) {
  if (!obj) {
    return null
  }
  if (key.indexOf('.') >= 0) {
    const firstKey = key.substr(0, key.indexOf('.'))
    const lastKey = key.substr(key.indexOf('.') + 1)
    return getValue(obj[firstKey], lastKey)
  }
  return obj[key]
}

export default {
  // 继承
  name: 'SSelect',
  props: {
    code: String,
    url: String,
    data: {
      type: Array,
      required: false,
      default: undefined
    },
    modelValue: {
      type: String,
      required: false
    },
    mode: {
      type: String,
      required: false,
      default: 'default'
    },
    labelField: {
      type: String,
      default: 'text'
    },
    valueField: {
      type: String,
      default: 'value'
    }
  },
  emits: ['change', 'update:modelValue', 'check'],
  data() {
    return { config: { options: this.data || [] }, fakeValue: undefined }
  },
  watch: {
    modelValue(val) {
      if (!val) {
        this.fakeValue = undefined
      } else {
        if (this.mode != 'multiple') {
          this.fakeValue = val
        } else {
          const array = val.split(',')
          this.fakeValue = array
        }
      }
    },
    data() {
      this.config.options = this.data
    },
    url() {
      this.loadData()
    },
    code() {
      this.loadData()
    }
  },
  created() {
    if (!this.modelValue) {
      this.fakeValue = undefined
    } else {
      if (this.mode != 'multiple') {
        this.fakeValue = this.modelValue
      } else {
        const array = this.modelValue.split(',')
        this.fakeValue = array
      }
    }
    this.loadData()
  },
  methods: {
    getLabel() {
      const labels = []
      if (this.fakeValue) {
        if (Array.isArray(this.fakeValue)) {
          this.fakeValue.forEach((item) => {
            const r = this.config.options.find((v) => v.value == item)
            if (r) {
              labels.push(r.label)
            }
          })
        } else {
          const r = this.config.options.find((v) => v.value == this.fakeValue)
          if (r) {
            labels.push(r.label)
          }
        }
      }
      return labels.toString()
    },
    filterOption(input, option) {
      return option.label.indexOf(input) >= 0
    },
    loadData() {
      if (this.url) {
        this.$api.GET(this.url).then((res) => {
          const groups = []
          if (res.data) {
            res.data.forEach((item) => {
              groups.push({
                label: getValue(item, this.labelField),
                value: getValue(item, this.valueField)
              })
            })
          }
          this.config.options = groups
        })
      } else if (this.code) {
        this.$api
          .GET('/data/dict/item/selectListByGroupId', { groupIds: this.code })
          .then((res) => {
            const groups = []
            if (res.data) {
              res.data[this.code].forEach((item) => {
                groups.push({ label: item.text, value: item.value })
              })
            }
            this.config.options = groups
          })
      } else {
        this.config.options = this.data
      }
    },
    refreshData() {
      this.loadData()
    },
    onChange(checkedValues, option) {
      this.$emit('update:modelValue', checkedValues ? checkedValues.toString() : undefined)
      this.$emit('change', checkedValues ? checkedValues.toString() : undefined)
      this.$emit('check', findLabels(this.config.options, checkedValues))
    }
  }
}
</script>
